<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="青云志是一款在线聊天网站，提供了在线交友、世界聊天、随机聊天、离线信息以及游戏娱乐功能，大家可以在这里找到许多欢乐。">
    <meta name="keywords" content="网站在线聊天，青云志，不坠青云之志，thenie，随机聊天，在线交友，认识新朋友，小游戏，娱乐，放松，交友，简便，快捷">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>青云志在线聊 (゜-゜)つロ 嗨皮~-thenie</title>
    <!-- Fevicon -->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <!-- Start css -->
    <!-- Slick css -->
    <link th:href="@{/plugins/slick/slick.css}" rel="stylesheet">
    <link th:href="@{/plugins/slick/slick-theme.css}" rel="stylesheet">
    <link href="https://cdn.bootcss.com/cropperjs/2.0.0-alpha.1/cropper.css" rel="stylesheet">

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/icons.css}" rel="stylesheet" type="text/css">

    <link th:href="@{/css/flag-icon.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">


<!--    &lt;!&ndash; End css &ndash;&gt;-->
    <link rel="stylesheet" th:href="@{/layui/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/public.css}" media="all">

    <!--表情&剪切css-->
    <link th:href="@{/css/sitelogo.css} " rel="stylesheet">

</head>
<body class="light-layout">

    <!-- 添加好友模块 -->
    <div class="modal create-group-modal fade" id="createGroup" tabindex="-1" role="dialog" aria-labelledby="createGroupTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createGroupTitle">添加好友</h5>
                </div>
                <div class="modal-body">
                    <form onsubmit="return false;">
                        <div class="add-users-search">
                            <!--搜索框-->
                            <div class="input-group">
                                <input type="search" id="add-users-search-input" class="form-control" placeholder="请输入CHAT号/邮箱" aria-label="Search" aria-describedby="add-users-search-btn" onkeydown="keydownAddUserSearch(event)">
                                <div class="input-group-append">
                                    <button class="btn" type="submit" id="add-users-search-btn" onclick="addUserSearch()"><i class="feather icon-search"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="add-users-list" id="addUserList" style="display: none">
                            <ul class="list-unstyled">
                                <li class="media">
                                    <img class="align-self-center rounded-circle" th:src="@{/images/girl.svg}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5><span>name</span></h5>
                                        <p>status</p>
                                        <input type="hidden" id="add-user-id" value="">
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <a href="javascript:;" class="btn btn-primary btn-lg" onclick="submitAddUser()" style="font-size: 12px; font-weight: 500;" role="button">
                                            <i class="feather icon-plus mr-2"></i>加为好友
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--好友请求记录模块-->
    <div class="modal create-group-modal fade" id="friendAddRequest" tabindex="-1" role="dialog" aria-labelledby="friendAddRequestTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="friendAddRequestTitle">新朋友</h5>
            </div>
            <div class="modal-body">
                <form onsubmit="return false;">
                    <div class="add-users-list" >
                        <ul class="list-unstyled" id="friendRequestUl">

                            <li th:each="friendRequest : ${friendRequestList}" class="media">
                                <img class="align-self-center rounded-circle" th:src="@{${friendRequest.photo}}" alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5><span th:text="${friendRequest.realName}"></span></h5>
                                    <p th:text="${friendRequest.status}">status</p>
                                    <input type="hidden" name="uid" th:value="${friendRequest.fromId}">
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <a href="javascript:;" th:if="${friendRequest.sign==0}" class="btn btn-success btn-xs" onclick="submitReqAccept($(this))" style="font-size: 12px; font-weight: 500;" role="button">
                                        <i class="feather icon-check"></i> 同意
                                    </a>
                                    <a href="javascript:;" th:if="${friendRequest.sign==0}" class="btn btn-danger btn-xs" onclick="submitReqRefused($(this))" style="font-size: 12px; font-weight: 500;" role="button">
                                        <i class="feather icon-x"></i> 拒绝
                                    </a>
                                    <span th:if="${friendRequest.sign==1}">已同意</span>
                                    <span th:if="${friendRequest.sign==2}">已拒绝</span>
                                </div>
                            </li>

                        </ul>
                    </div>

                </form>
            </div>
        </div>
    </div>
    </div>

    <!--提醒删除聊天记录模块-->
    <div class="modal" id="warnClearMessage" tabindex="-1" role="dialog" aria-labelledby="warnClearMessageTitle" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提醒</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <p>确定后，将删除<span style="color: black">本地聊天记录</span>。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" onclick="submitClearMessage()">确定</button>
                    <button type="button" class="btn btn-default" id="closeWarnCM" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--提醒删除好友模块-->
    <div class="modal" id="warnRemoveFriend" tabindex="-1" role="dialog" aria-labelledby="warnRemoveFriendTitle" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提醒</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <p>确定后，将删除<span style="color: black">该好友</span>。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" onclick="submitRemoveFriend()">确定</button>
                    <button type="button" class="btn btn-default" id="closeWarnRF" data-dismiss="modal" >取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 开始传入视频呼叫模式 Development Pending-->
    <div class="modal incoming-video-modal fade" id="incomingVideoCall" tabindex="-1" role="dialog" aria-labelledby="incomingVideoCallTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="incomingVideoCallTitle">视频通话</h5>
                </div>
                <div class="modal-body">
                    <p>功能开发中，敬请期待^^</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="feather icon-x mr-2"></i>关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 开始传入语音呼叫模式 Development Pending-->
    <div class="modal incoming-voice-modal fade" id="incomingVoiceCall" tabindex="-1" role="dialog" aria-labelledby="incomingVoiceCallTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="incomingVoiceCallTitle">语音通话</h5>
                </div>
                <div class="modal-body">
                    <p>功能开发中，敬请期待^^</p>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="feather icon-x mr-2"></i>关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 开始错误屏幕模式-->
    <div class="modal error-screen-modal fade" id="errorScreen" tabindex="-1" role="dialog" aria-labelledby="errorScreenTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="errorScreenTitle">Connection Error</h5>
                </div>
                <div class="modal-body">
                    <img th:src="@{/images/connection_error.svg}" class="img-fluid" alt="connection_error">
                    <h5>Computer not Connected</h5>
                    <p>Please, check internet connection this PC.</p>
                    <button type="button" class="btn btn-info"><i class="feather icon-repeat mr-2"></i>Try Again</button>
                </div>
            </div>
        </div>
    </div>
    <!--头像上传-->
    <div class="modal fade" id="photoUpload" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <!--头-->
            <div class="modal-header">
                <div class="row">
                    <div class="col-md-11"><h4 class="modal-title" id="gridSystemModalLabel">更换头像</h4></div>
                    <div class="col-md-1"><button class="btn" data-dismiss="modal" type="button"><i class="feather icon-x"></i></button></div>
                </div>
            </div>
            <!--身体-->

            <div class="modal-body">
                <div class="avater-body">
                    <div class="row">
                        <div class="col-md-2" style="color:#0C0926;line-height:36px;">
                            <strong class="text-center" style="font-size:15pt">图片上传</strong>
                        </div>

                        <div class="col-md-10">
                            <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" style="display: none;" onchange="selectImg(this)" />
                            </label>
                            <button class="btn btn-danger" onclick="$('input[id=chooseImg]').click()">请选择图片</button>
                            <span id="chooseImgName"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <!--图片裁剪框 start-->
                            <div class="avatar-wrapper" >
                                <div  class="tailoring-container">
                                    <div class="tailoring-content">

                                        <div class="tailoring-box-parcel"style="height: 360px;">
                                            <img id="tailoringImg" src="">
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-2">
                            <!--图片裁剪预览-->
                            <div class="avatar-preview preview-lg" id="imageHead">
                                <img id="finalImg" name="photo" src="" alt="" >

                            </div>
                        </div>
                    </div>
                    <!--底部操作框-->
                    <div class="row avatar-btns">
                        <div class="col-md-9">
                            <div class="btn-group">
                                <button class="btn btn-danger cropper-left-rotate-btn"><i class="feather icon-rotate-ccw"></i> 向左旋转</button>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-danger cropper-right-rotate-btn"><i class="feather icon-rotate-cw"></i> 向右旋转</button>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-primary" onclick="submitPhotoUpload()"><i class="feather icon-save"></i> 保存修改</button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div></div>

    <a id="random-link" href="/" target="_blank" style="display: none;">跳转</a>

    <!-- 开始聊天的布局-主体 -->
    <div class="chat-layout">
        <!-- 左侧栏-->
        <div class="chat-leftbar">
            <div class="tab-content" id="pills-tab-justifiedContent">
                <!-- 最近聊天记录 -->
                <div class="tab-pane fade show active" id="pills-chat-justified" role="tabpanel" aria-labelledby="pills-chat-tab-justified">
                    <div class="chat-listbar">
                        <div class="chat-left-headbar">
                            <div class="row align-items-center">
                                <div class="col-9">
                                    <ul class="list-unstyled mb-0">
                                        <li class="media">
                                            <img class="align-self-center mr-2" th:src="@{/images/logo.svg}" alt="Generic placeholder image">
                                            <div class="media-body">
                                                <h5 class="mb-0 mt-2">最近消息</h5>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-3">
                                    <a href="javascript:;" data-toggle="tooltip" data-placement="right" title="退出登录" onclick="logout()" >
                                        <i class="feather icon-log-out"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="chat-left-search">
                            <input type="search" class="form-control y1" placeholder="搜索" aria-label="Search" aria-describedby="chat-left-search-btn">
                        </div>
                        <div class="chat-left-body">
                            <div class="nav flex-column nav-pills chat-userlist" id="chat-list-tab" role="tablist" aria-orientation="vertical">
                            </div>
                        </div>
                    </div>
                </div>
                <!--好友-->
                <div class="tab-pane fade" id="pills-addchat-justified" role="tabpanel" aria-labelledby="pills-addchat-tab-justified">
                    <div class="chat-addbar">
                        <!--提示栏-->
                        <div class="chat-left-headbar">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <ul class="list-unstyled mb-0">
                                        <li class="media">
                                            <img class="align-self-center mr-2" th:src="@{/images/logo.svg}" alt="Generic placeholder image">
                                            <div class="media-body">
                                                <h5 class="mb-0 mt-2">联系人</h5>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-2">
                                    <a href="#" data-toggle="modal" data-target="#friendAddRequest" onclick="javascript:$('#friendRequestBadge').hide();">
                                        <i class="feather icon-mail" ></i>
                                        <i class="badge-msg" id="friendRequestBadge" style="display: none;"></i>
                                    </a>
                                </div>
                                <div class="col-2">
                                    <a href="#" data-toggle="modal" data-target="#createGroup">
                                        <i class="feather icon-user-plus" ></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!--搜索栏 -->
                        <div class="chat-left-search">
                                <div class="input-group">
                                  <input type="search" class="form-control" style="font-size: 14px" placeholder="快去添加/点击好友，发起聊天吧~" aria-label="Search" aria-describedby="chat-left-search-user-btn">
                                </div>
                            </form>
                        </div>
                        <!--好友栏-->
                        <div class="chat-left-body">
                            <div class="nav flex-column nav-pills chat-userlist" id="friend-list" role="tablist" aria-orientation="vertical">

                                <a th:each="friend,cur : ${friendList}" class="nav-link"  th:name="${cur.index}" data-toggle="pill" href="#" role="tab" aria-selected="false">
                                    <div class="media">
                                        <div th:class="'user-status'+${friend.onLine==1 ?'':' hidden'}"></div>
                                        <img class="align-self-center rounded-circle" th:src="@{${friend.photo}}" alt="User Image">
                                        <div class="media-body">
                                            <h5 th:text="${friend.realName ?: friend.username}">Ema Star</h5>
                                            <p th:text="${friend.status ?:'我很神秘~'}">Work mode ON !!</p>
                                        </div>
                                    </div>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 我的资料 -->
                <div class="tab-pane fade" id="pills-profile-justified" role="tabpanel" aria-labelledby="pills-profile-tab-justified">
                    <div class="chat-profilebar">
                        <div class="chat-left-headbar">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <ul class="list-unstyled mb-0">
                                        <li class="media">
                                            <img class="align-self-center mr-2" th:src="@{/images/logo.svg}" alt="Generic placeholder image">
                                            <div class="media-body">
                                                <h5 class="mb-0 mt-2">我的资料</h5>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="chat-left-body">
                            <div class="profilebar">
                                <!--头像-->
                                <img class="profile-pic img-fluid" id="myPhoto" th:src="@{${user.photo}}" style="height: 100px;" alt="profile-pic">
                                <div class="profile-edit">
                                    <span style="cursor:pointer;"data-toggle="tooltip" data-placement="right" title="更换头像">
                                        <i class="feather icon-camera " data-toggle="modal" data-target="#photoUpload" ></i>
                                    </span>
                                    <input class="profile-upload" type="file" value="" accept="image/*"/>
                                </div>
                                <h5 th:text="'CHAT号：'+${user.username}"></h5>
                                <p class="mb-0" > </p>
                            </div>
                            <div class="profile-detail">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <i class="feather icon-user align-self-center"></i>
                                        <div class="media-body">
                                            <p>昵称</p>
                                            <div class="input-group">
                                                <input type="text" id="myRealName" name="realName" class="form-control" th:value="${user.realName ?: user.username}" readonly="true" aria-label="Will Patinson" aria-describedby="button-addon-group-username">
                                                <div class="input-group-append">
                                                    <button class="btn btn-link" type="button" id="button-addon-group-username" onclick="openUpdateUsesWindow('myRealName')">修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="media">
                                        <i class="layui-icon layui-icon-male feather align-self-center "></i>
                                        <div class="media-body">
                                            <p>性别</p>
                                            <div class="input-group">
                                                <input type="text" id="mySex" name="sex" class="form-control" th:value="${user.sex ==1 ?'男' : '女'}" readonly="true" aria-label="Will Patinson" aria-describedby="button-addon-group-username">
                                                <div class="input-group-append">
                                                    <button class="btn btn-link" type="button" id="button-addon-group-sex" onclick="openUpdateUsesWindow('mySex')">修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="media">
                                        <i class="feather icon-map align-self-center"></i>
                                        <div class="media-body">
                                            <p>所在地</p>
                                            <div class="input-group">
                                                <input type="text" id="myLocation" name="location" class="form-control" th:value="${user.location ?: '火星'}" aria-label="Florida, USA" readonly="true" aria-describedby="button-addon-group-location">
                                                <div class="input-group-append">
                                                    <button class="btn btn-link" type="button" id="button-addon-group-location" onclick="openUpdateUsesWindow('myLocation')">修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <i class="feather icon-message-square align-self-center"></i>
                                        <div class="media-body">
                                            <p>个性签名</p>
                                            <div class="input-group">
                                                <input type="text" id="myStatus" name="status" class="form-control" th:value="${user.status ?: '我很神秘~'}" aria-label="I am on Gappa" readonly="true" aria-describedby="button-addon-group-status">
                                                <div class="input-group-append">
                                                    <button class="btn btn-link" type="button" id="button-addon-group-status" onclick="openUpdateUsesWindow('myStatus')">修改</button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <i class="feather icon-mail align-self-center"></i>
                                        <div class="media-body">
                                            <p>电子邮箱</p>
                                            <div class="input-group">
                                                <input type="email" class="form-control" th:value="${user.email}" aria-label="demo@example.com" readonly="true" >
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <!--弹出层-->
                                <div style="display: none;padding: 5px" id="updateUserWindow">
                                    <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm" onsubmit="return false;">

                                        <div class="layui-form-item">

                                            <div class="layui-inline">
                                                <label class="layui-form-label" style="width:100px" id="updateUserKey">修改字段</label>
                                                <div class="layui-input-block">
                                                    <input type="hidden" id="updateUserKeyu" value="">
                                                    <input type="text" name="noneInput" value="动态出现" id="updateUserVal" lay-verify="required"  autocomplete="off"  class="layui-input">
                                                </div>
                                            </div>

                                        </div>

                                        <div class="layui-form-item layui-row layui-col-xs12">
                                            <div class="layui-input-block" style="text-align: center;">
                                                <button type="button" class="layui-btn" onclick="submitMainUser()">
                                                    <span class="layui-icon layui-icon-ok"></span>确认</button>
                                                <button type="button" class="layui-btn layui-btn-warm" onclick="closeMainUser()">
                                                    <span class="layui-icon layui-icon-close"></span>取消</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--设置-->
                <div class="tab-pane fade" id="pills-setting-justified" role="tabpanel" aria-labelledby="pills-setting-tab-justified">
                    <div class="chat-settingbar">
                        <div class="chat-left-headbar">
                            <div class="row align-items-center">
                                <div class="col-9">
                                    <ul class="list-unstyled mb-0">
                                        <li class="media">
                                            <img class="align-self-center mr-2" th:src="@{/images/logo.svg}" alt="Generic placeholder image">
                                            <div class="media-body">
                                                <h5 class="mb-0 mt-2">小世界</h5>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-3">
                                    <div class="dropdown">
                                        <a href="#" id="settingDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-more-vertical-"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="settingDropdown">
                                            <a class="dropdown-item font-14" >祝大家天天开心skr~</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-left-body">
                            <p class="setting-header">交友</p>
                            <div class="general-setting">
                                <a th:href="@{/world-window}" target="_blank">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(｡・`ω´･) 世界之窗</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-checkbox">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" onclick="randomChatMatch()">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(｡・`ω´･) 机遇之都</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-checkbox">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <p class="setting-header">游戏</p>
                            <div class="privacy-setting">
                                <a th:href="@{/game/racing}" target="_blank">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(σ｀・д･)σ 激情赛车闯关</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-switch">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a th:href="@{/game/poker}" target="_blank">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(σ｀・д･)σ 神秘扑克卡牌</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-switch">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a th:href="@{/game/cube}" target="_blank">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(σ｀・д･)σ 智力魔方</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-switch">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <p class="setting-header">关于作者</p>
                            <div class="privacy-setting">
                                <a href="http://blog.thenie.top" target="_blank">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(oﾟωﾟo) 我的博客</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-switch">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a href="http://img.thenie.top" target="_blank">
                                    <div class="row align-items-center pb-3">
                                        <div class="col-9"><h6 class="mb-0">(oﾟωﾟo) 我的图床（共享）</h6></div>
                                        <div class="col-3 text-right">
                                            <div class="custom-control custom-switch">
                                            </div>
                                        </div>
                                    </div>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-menu">
                <ul class="nav nav-pills nav-justified mb-0" id="pills-tab-justified" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pills-chat-tab-justified" data-toggle="pill" href="#pills-chat-justified" role="tab" aria-controls="pills-chat-justified" aria-selected="true">
                            <i class="feather icon-message-circle"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-addchat-tab-justified" data-toggle="pill" href="#pills-addchat-justified" role="tab" aria-controls="pills-addchat-justified" aria-selected="false">
                            <i class="feather icon-user"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-profile-tab-justified" data-toggle="pill" href="#pills-profile-justified" role="tab" aria-controls="pills-profile-justified" aria-selected="false">
                            <i class="feather icon-layout"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-setting-tab-justified" data-toggle="pill" href="#pills-setting-justified" role="tab" aria-controls="pills-setting-justified" aria-selected="false">
                            <i class="feather icon-aperture"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <input type="hidden" id="userId" th:value="${user.id}">
        </div>
        <!-- 右侧栏-->
        <div class="chat-rightbar fade" id="mainLiaotian">
            <!-- 聊天框-->
            <div class="chat-detail">
                <!--头-->
                <div class="chat-head">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <ul class="list-unstyled mb-0">
                                <li class="media">
                                    <div class="user-status hidden" id="liaotian-friend-onLine"></div>
                                    <img class="align-self-center rounded-circle" id="liaotian-friend-photo" th:src="@{/images/girl.svg}" alt="Generic placeholder image">
                                    <div class="media-body">
                                        <h5 id="liaotian-friend-name">name</h5>
                                        <p class="mb-0" id="liaotian-friend-onLine2">在线</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul class="list-inline float-right mb-0">
                                <li class="list-inline-item">
                                    <a href="#" data-toggle="modal" data-target="#incomingVoiceCall"><i class="feather icon-phone"></i></a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#" data-toggle="modal" data-target="#incomingVideoCall"><i class="feather icon-video"></i></a>
                                </li>                                         
                                <li class="list-inline-item">
                                    <div class="dropdown">
                                        <a href="#" class="" id="chatDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-more-vertical-"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="chatDropdown">
                                            <a class="dropdown-item font-14" href="#" id="view-user-info">用户信息</a>
                                            <a class="dropdown-item font-14" href="#" data-toggle="modal" data-target="#warnRemoveFriend">删除好友</a>
                                            <a class="dropdown-item font-14" href="#" data-toggle="modal" data-target="#warnClearMessage">删除聊天记录</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#" class="back-arrow"><i class="feather icon-x"></i></a>
                                </li>
                            </ul>                                            
                        </div>
                    </div>                                    
                </div>
                <!--聊天内容-->
                <div class="chat-body">
                    <div class="tab-content" id="chat-listContent">
                        <div class="tab-pane fade show active" id="chat-first" role="tabpanel" aria-labelledby="chat-first-tab">
                            <div class="chat-day text-center mb-3">
                                <span class="badge badge-secondary-inverse">Today</span>
                            </div>                                
                            <div class="chat-message chat-message-right">
                                <div class="chat-message-text">
                                    <span>Hello! please, let me know the status about project after school.</span>
                                </div>
                                <div class="chat-message-meta">
                                    <span>4:18 pm<i class="feather icon-check ml-2"></i></span>
                                </div>
                            </div>
                            <div class="chat-message chat-message-left">
                                <div class="chat-message-text">
                                    <span>I have completed 4 stages 5 stages remaining.</span>
                                </div>
                                <div class="chat-message-meta">
                                    <span>4:20 pm<i class="feather icon-check ml-2"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="chat-fourtinth" role="tabpanel" aria-labelledby="chat-fourtinth-tab">
                            <div class="empty-screen">
                                <img th:src="@{/images/empty-logo.png}" class="img-fluid" alt="empty-logo">
                                <h4 class="my-3">暂无聊天记录</h4>
                            </div>
                        </div>
                    </div>                    
                </div>
                <!--操作键-->
                <div class="chat-bottom">
                    <div class="chat-messagebar">
                        <form onsubmit="return false">
                            <div class="input-group">
                                <div class="input-group-prepend dropup">
                                    <a href="#" id="button-addonmic" data-toggle="dropdown">
                                        <i class="layui-icon layui-icon-face-smile-b"></i>
                                    </a>
                                    <ul class="dropdown-menu emoji-list" role="menu" aria-labelledby="button-addonmic">
                                    </ul>
                                </div>
                                <input type="text" id="input-message" class="form-control" placeholder="确认/Enter发送消息..." aria-label="Text" onkeydown="keydownSend(event)">
                                <div class="input-group-append">
                                    <a href="#" class="mr-3" id="button-addonlink"><i class="feather icon-paperclip"></i></a>
                                    <a href="javascript:;" id="button-addonsend" onclick="send()"><i class="feather icon-send"></i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- 对方用户信息详情 -->
            <div class="chat-user-info">
                <div class="chat-user-head">
                    <div class="row align-items-center">
                        <div class="col-9">                                                
                            <h5>用户信息</h5>
                        </div>
                        <div class="col-3">
                            <ul class="list-inline float-right mb-0">
                                <li class="list-inline-item">
                                    <a href="#" id="close-user-info"><i class="feather icon-x"></i></a>
                                </li>
                            </ul>                                            
                        </div>
                    </div>                                    
                </div>
                <div class="chat-user-body">
                    <div class="userbar">
                        <img class="user-pic img-fluid" th:src="@{/images/girl.svg}" alt="user-pic">
                        <h5>姓名，↑头像</h5>
                        <p class="mb-0"></p>
                    </div>
                    <div class="user-detail">
                        <p class="user-detail-header">简介</p>
                        <div class="user-about">
                            <h6><i class="feather icon-message-square mr-2"></i>CHAT号: <span></span></h6>
                            <h6 class="my-3"><i class="layui-icon layui-icon-male feather align-self-center mr-2"></i>性别: <span></span></h6>
                            <h6><i class="feather icon-heart mr-2"></i>个性签名: <span></span></h6>
                            <h6 class="my-3"><i class="feather icon-mail mr-2"></i>邮箱: <span></span></h6>
                            <h6 class="mb-0"><i class="feather icon-phone-call mr-2"></i>地址: <span></span></h6>
                        </div>

                    </div>
                </div>                                
            </div>
        </div>
    </div>


    <!-- Start js -->
    <script src="https://cdn.bootcss.com/cropperjs/2.0.0-alpha.1/cropper.js"></script>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>
    <script th:src="@{/js/detect.js}"></script>
    <script th:src="@{/js/jquery.slimscroll.js}"></script>
    <script th:src="@{/js/vertical-menu.js}"></script>
    <!-- Slick js -->
    <script th:src="@{/plugins/slick/slick.min.js}"></script>
    <!-- Core js -->
    <script th:src="@{/js/core.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/layui/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>

    <script th:src="@{/js/dropsearch.js}" charset="utf-8"></script>



    <script th:inline="javascript">
        class ListNode {
            constructor(key, value) {//单个节点
                this.key = key
                this.value = value
                this.next = null //指向后一个节点
            }
        }
        class ChatCache {
            constructor() {
                this.hashTable = {} //存放键值对信息
                this.count = 0 //键值对数量
                this.dummyHead = new ListNode(-1,null); //dummy尾/头节点 方便在链表从开始的地方插入
                this.dummyTail = this.dummyHead; //dummyHead和dummyTail相互连接
            }

            //添加元素（时刻保证链表中key不重复）
            put(key,value){
                if(this.hashTable[key] != null){
                    //删除结点
                    //由于是单链表，所以删除过程繁琐些
                    var evenode = this.hashTable[key];
                    evenode.value = evenode.next.value;
                    evenode.key = evenode.next.key;
                    evenode.next = evenode.next.next;
                    if (evenode.key==-1){
                        this.dummyTail = evenode;
                    }
                    this.hashTable[evenode.key] = evenode;
                }else{
                    this.count++;
                }
                //添加到头结点
                let node = new ListNode(key,value);
                this.hashTable[key] = node;
                node.next = this.dummyHead;
                this.dummyHead = node;
            }
            //删除元素
            remove(key){
                if (key!=-1 && this.hashTable[key]!=null){
                    //删除结点
                    //由于是单链表，所以删除过程繁琐些
                    var evenode = this.hashTable[key];
                    evenode.value = evenode.next.value;
                    evenode.key = evenode.next.key;
                    evenode.next = evenode.next.next;
                    if (evenode.key==-1){
                        this.dummyTail = evenode;
                    }
                    this.hashTable[evenode.key] = evenode;
                    this.count--;
                }
            }

            //类型转换
            static valueOf(obj){
                var cc = new ChatCache();
                if (obj.count > 0){
                    let tem = obj.dummyHead;
                    let head = new ListNode(tem.key,tem.value);
                    let node = head;
                    tem = tem.next;
                    cc.hashTable[node.key] = node;
                    while(tem.next!=null){
                        node.next = new ListNode(tem.key,tem.value);
                        node = node.next;
                        cc.hashTable[node.key] = node;
                        tem = tem.next;
                    }
                    cc.count = obj.count;
                    cc.dummyHead = head;
                    node.next = cc.dummyTail;
                }
                return cc;
            }

        }

        var userId = $("#userId").val();//当前用户id
        var username = $("#username").val();//当前用户名
        var friendList = /*[[${friendList}]]*/ [];//好友列表信息
        var idIdxMap = /*[[${idIdxMap}]]*/ null;//用户id和数组中下标映射
        //用户聊天
        var toFriendId;
        var webSocket = null;
        var host = window.location.host;
        var chatCache = localStorage.getItem("chatCache_user_"+userId);
        if ('WebSocket' in window) {
            webSocket = new WebSocket("ws://"+host+"/ws/dialog?userId="+userId);
        }
        else {
            alert('当前浏览器不支持 websocket，可能会导致部分功能不可用')
        }
        if (chatCache ==null){
            chatCache = new ChatCache();
        }else{
            chatCache = ChatCache.valueOf(JSON.parse(chatCache));
        }

        //用户资料弹出层
        var mainUser;
        var mainInputId;

        //初始化头像上传
        var cropper =  new Cropper($('#tailoringImg')[0],{
            aspectRatio: 1 / 1,// 默认比例
            preview: '#abc',// 预览视图
            guides: true, // 裁剪框的虚线(九宫格)
            viewMode: 1,
            autoCropArea: 0.8, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: true, // 是否允许移动图片
            dragCrop: false, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            movable: true, // 是否允许移动剪裁框
            resizable: false, // 是否允许改变裁剪框的大小
            scalable: true, //是否可以缩放图片
            zoomable: true, // 是否允许缩放图片大小
            mouseWheelZoom: true, // 是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: false, // 是否允许通过触摸移动来缩放图片
            rotatable: true, // 是否允许旋转图片
            crop: function (e) {
                let cas = cropper.getCroppedCanvas();// 获取被裁剪后的canvas
                let base64 = cas.toDataURL('image/jpeg'); // 转换为base64
                $("#finalImg").prop("src", base64);// 显示图片
                // 输出结果数据裁剪图像。
            }
        });

        //初始化搜索列表
        $(document).ready(function() {
            var ds = DropSearch.init({
                selector: ".y1",
                debounceTime: 300,
                clickHandler: function (data) {//选中后的回调函数
                    showStartChat(data);
                    $(".y1").val("");
                },
                onInput (value) {//结果集匹配
                    setTimeout(function () {
                        ds.renderList(generateList(value));
                    }, 400)
                }
            });
        });
        //查询匹配的结果数组，并返回
        function generateList (val) {
            var list = []
            for (var i = 0; i < friendList.length; i ++) {
                var realName = friendList[i].realName;
                if (realName.indexOf(val) != -1) {
                    // 说明有这一个内容
                    var node ={};
                    node.list = friendList[i];
                    node.idx = i;
                    list.push(node);
                }
            }
            return list;
        }
        //初始化最近聊天记录
        $(function () {
            var node = chatCache.dummyHead;

            //循环chatCache集合,逐个渲染
             for(var i=0;i<chatCache.count;i++){
                displayLeftChat(node);
                node=node.next;
            }

             //渲染好友请求徽章
             if ($('#friendRequestUl').children().length>0){
                $("#friendRequestBadge").show();
            }
             //温馨提示
            if (friendList == null || friendList.length <=0){
                layer.open({
                    title: '温馨提示'
                    ,content: '您当前还没有好友哦，快去【联系人】模块添加新朋友吧^^'
                    ,icon: '6'
                    ,anim: 4
                });
            }
        })

        function displayLeftChat(node) {
            var idx = idIdxMap[node.key];
            var friend = friendList[idx];
            var $chatListTab = $("#chat-list-tab");
            var hidden = 0;
            hidden = hidden === friend.onLine ? " hidden" : "";//是否在线
            var tab =
                "                                <a class=\"nav-link\" id=\"chat-tab-"+friend.id+"\" name=\""+idx+"\"data-toggle=\"pill\" href=\"#\" role=\"tab\" aria-selected=\"false\">\n" +
                "                                    <div class=\"media active\">\n" +
                "                                        <div class=\"user-status"+hidden+"\"></div>\n" +
                "                                        <img class=\"align-self-center rounded-circle\" src=\""+friend.photo+"\" alt=\"User Image\">\n" +
                "                                        <div class=\"media-body\">\n" +
                "                                            <h5>"+friend.realName+"<span class=\"chat-timing\">"+node.value.lastDateTime+"</span></h5>\n" +
                "                                            <p>"+node.value.lastMessage+"</p>\n" +
                "                                        </div>\n" +
                "                                    </div>\n" +
                "                                </a>"
            $chatListTab.append(tab);
        }
        /**
         * 上升最近聊天Tab
         * */
        function chatUpTab(toId,message) {
            var val={};
            val["lastDateTime"] = message.dateTime;
            val["lastMessage"] = message.text;
            console.log("key:"+toId)
            var node = chatCache.hashTable[toId];
            //保存到chatCache
            chatCache.put(toId,val);
            if (node == null){
                console.log("元素创建")
                node = chatCache.hashTable[toId];
                //新建元素
                displayLeftChat(node);
            }else{
                //修改内容
                $("#chat-tab-"+toId+" > div > .media-body span").html(message.dateTime);
                $("#chat-tab-"+toId+" > div > .media-body p").html(message.text);
            }
            //上升到列表no.1
            $("#chat-tab-"+toId).prependTo("#chat-list-tab");

        }
        /**
         * 选择文件触发事件
         * */
        function selectImg(file) {
            //文件为空，返回
            if (!file.files || !file.files[0]) {
                return;
            }
            //$(".tailoring-container").toggle();
            var reader = new FileReader();
            reader.onload = function (evt) {
                var replaceSrc = evt.target.result;
                // 更换cropper的图片
                cropper.replace(replaceSrc,false);// 默认false，适应高度，不失真
            }
            $("#chooseImgName").html(file.files[0].name);
            reader.readAsDataURL(file.files[0]);
        }

        /**
         * 提交头像上传
         **/
        function submitPhotoUpload(){
            $("#photoUpload").modal('hide');
            layer.msg("修改中...")
            var imgSrc = $("#finalImg").attr('src');
            var imgName = $("#chooseImgName").html();
            var file = base64UrlToFile(imgSrc,imgName);
            var formData = new FormData();
            formData.append("photo",file);
            formData.append("userId",userId);

            $.ajax({
                url: "/user/uploadPhoto",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.code==200){
                        $("#myPhoto").prop('src',imgSrc);
                        layer.msg("修改成功！",{icon: 1})
                    }else{
                        layer.msg(data.message,{icon: 2});
                    }
                },
                error: function () {
                    layer.closeAll();
                }

            });

        }

        /**
         * 将图片base64转成文件
         * */
        function base64UrlToFile(dataurl, filename) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
           return new File([u8arr], filename, {type:mime});
        }
        /**
         *旋转按钮
         */
        $(".cropper-left-rotate-btn").on("click", function () {
            cropper.rotate(-90);
        });
        $(".cropper-right-rotate-btn").on("click", function () {
            cropper.rotate(90);
        });

        //我的资料
        /**
         * 退出系统，注销
         */
        function logout() {
            $.ajax({
                url: "/user/logout",
                type: "POST",
                data: {
                },
                success: function (data) {
                        //退出登录成功
                        window.location.href = "/login";
                },
                error: function () {
                    layer.msg("退出登录失败！",{icon:2});
                }
            });
        }

        /**
         * 打开修改
         * @param name
         */
        function openUpdateUsesWindow(name) {
            var key;
            var keyu = $("#"+name).attr('name');
            var valu = $("#"+name).val();

            switch (name) {
                case 'myRealName':
                    key = "昵称";
                    break;
                case 'mySex':
                    key = "性别";
                    break;
                case 'myLocation':
                    key = "所在地";
                    break;
                case 'myStatus':
                    key = "个性签名";
                    break;
            }

            mainUser=layer.open({
                type: 1,
                title:"修改信息",
                area:["341px","169px"],
                content: $("#updateUserWindow"),
                success:function () {
                    //修改表单信息
                    $("#updateUserKey").text(key+":");
                    $("#updateUserVal").val(valu);
                    $("#updateUserKeyu").val(keyu);
                    mainInputId = name;

                }
            })

        }

        /*提交用户修改弹出层表单*/
        function submitMainUser() {
            var updateVal = $("#updateUserVal").val();
            var updateKey = $("#updateUserKeyu").val();
            var wei = $("#updateUserKey").text();
            var v=updateVal;
            if (updateKey == "sex"){
                if (updateVal =="女"){
                    v =0;
                }else if (updateVal =="男"){
                    v =1;
                }else{
                    layer.msg("性别格式错误【男/女】",{icon: 4});
                    return;
                }
            }

            wei = wei.substring(0,wei.length-1);
            closeMainUser();
            layer.msg("修改中...");
            $.ajax({
                url: "/user/update",
                type: "POST",
                data: updateKey+"="+v+"&userId="+userId,
                success: function (data) {
                    if (data.code==200){
                        $("#"+mainInputId).val(updateVal);
                        layer.msg("修改 "+wei+" 成功!",{icon: 1});
                    }else{
                        layer.msg(data.message,{icon: 2});
                    }
                },
                error: function () {
                    layer.msg("客户端故障!",{icon: 2});
                }
            });
        }

        function closeMainUser() {
            layer.close(mainUser);
        }

        //聊天区域显示
        $(".chat-userlist").on("click",".nav-link",function(e) {
            e.preventDefault();
            showStartChat($(this))
        });
        function showStartChat($ts){
            var i = $ts.attr('name');
            var friend = friendList[i];
            toFriendId = friend.id;

            //修改头部
            $("#liaotian-friend-name").html(friend.realName);
            $("#liaotian-friend-photo").attr('src',friend.photo)
            if (friend.onLine ==1 ){
                $("#liaotian-friend-onLine").removeClass("hidden");
                $("#liaotian-friend-onLine2").html("<span style='color: #1e7e34'>在线</span>")

            }else{
                $("#liaotian-friend-onLine").addClass("hidden");
                $("#liaotian-friend-onLine2").html("离线")
            }

            //修改聊天区域
            $("#chat-first").empty();//清除内容
            $(".chat-rightbar").addClass("show");
            displayChatFirst(toFriendId);
            if ($(".chat-user-info").hasClass("show")){
                updateUserBody(toFriendId);
            }
        }

        /**
         * websocket的四种事件
         */
        webSocket.onerror = function () {//出错执行
            layer.msg("WebSocket连接发生错误");
        };
        webSocket.onopen = function () {//连接成功后的回调方法
        }
        webSocket.onmessage = function (event) {//收到消息后的处理方法

            // var message = JSON.parse(event.data);
            var resp = JSON.parse(event.data);
            console.log("resp:"+resp);
            if (resp.code==1){
                //一条消息
                receiveOneMessage(resp.obj);
            }else if (resp.code==2){
                //离线消息
                receiveAllOfflineMessage(resp.obj);
            }else if (resp.code==3){
                //好友请求
                receiveFriendRequestMessage(resp.obj);
            }else if (resp.code==4){
                //有新的好友信息，添加到好友列表域中
                receiveNewFriendMessage(resp.obj);
            }else if (resp.code == 5){
                //有好友上线,更改好友状态
                console.log("有好友上线，更改好友状态")
                receiveOnlineChange(resp.obj,1);
            }else if (resp.code == 6){
                //有好友下线，更改好友状态
                console.log("有好友下线，更改好友状态")
                receiveOnlineChange(resp.obj,0);
            }else if (resp.code == 7){
                //随机匹配聊天成功
                if (null != randomChatMatchIdx){
                    layer.close(randomChatMatchIdx);
                }
                console.log("success")
                randomWindow(resp.obj);
            }

        }
        webSocket.onclose = function () {//连接关闭后的方法
            layer.msg("WebSocket连接关闭");
        }



        function keydownSend(event) {
            if (event.keyCode==13){
                send();
            }
        }
        //发送消息
        function send() {
            var text = $("#input-message").val();
            if(text ==null || text==""){
                return;
            }
            $("#input-message").val("");
            //封装成消息集合
            var message ={};
            message["dateTime"] = getNowFormatDate();
            message["text"] = text;
            message["toFriendId"] = toFriendId;
            message["fromId"] = userId;
            //消息集合序列化
            var jsonMessage = JSON.stringify(message);
            //展示在聊天区域
            displayMessage(message,1);
            //最近消息上调
            chatUpTab(toFriendId,message);
            //保存在本地存储
            localStoreMessage(message.toFriendId,jsonMessage);
            //发送消息
            webSocket.send(jsonMessage);
        }

        function keydownAddUserSearch(event) {
            if (event.keyCode==13){
                addUserSearch();
            }
        }

        /*好友搜索*/
        function addUserSearch() {
            //获取搜索框的内容
            var info = $("#add-users-search-input").val();
            //判断是否为空
            if (info==null || info==""){
                $("#addUserList").hide();
                return;
            }
            //发送请求
            $.ajax({
                url: "/user/selectUser/"+info,
                type: "GET",
                success: function (data) {
                    if (data.code==200){
                        var obj = data.obj;
                        if(obj.status == null || obj.status==""){
                            obj.status= "我很神秘~";
                        }
                        $("#addUserList").show();
                        //回显
                        $("#addUserList img").attr('src',obj.photo);
                        $("#addUserList span").html(obj.realName);
                        $("#addUserList p").html(obj.status);
                        $("#add-user-id").val(obj.id);
                    }else {
                        $("#addUserList").hide();
                        layer.msg("没有搜索到相关结果");
                    }
                },
                error: function () {
                    $("#addUserList").hide();
                    layer.msg("Error");
                }
            });
        }
        /*提交添加好友请求*/
        function submitAddUser() {
            var addUserId = $("#add-user-id").val();

            //判断是否是自己的好友，否则继续
            if (addUserId==userId || idIdxMap[addUserId]!=null){
                layer.msg("ta已经是你的好友，不能重复添加",{icon: 2});
                return;
            }
            //发送请求
            //（在服务端判断
            //是否已经是自己的好友 || 正在添加中 || 是自己 return
            //提示添加成功
            layer.msg("好友请求已发送")
            $.ajax({
                url: "/add-request/friend",
                type: "POST",
                data: {
                    toId: addUserId
                },
                success: function (data) {
                    if (data.code == 200){
                    }else{
                        layer.msg(data.message);
                    }
                },
                error: function () {
                    layer.msg("请求错误")
                }
            });

        }

        /*提交好友请求确认*/
        function submitReqAccept(data) {
            let $parent = data.parent();
            let uid = $parent.prev().children("input").val();
            console.log("已发送请求");
            $.ajax({
                url: "/add-request/accept",
                type: "POST",
                data: {
                    fromId: uid
                },
                success: function (data) {
                    if (data.code == 200){
                        receiveNewFriendMessage(data.obj);
                        $parent.children().remove();
                        $parent.html("已同意");
                    }else{
                        layer.msg(data.message);
                    }
                },
                error: function () {
                    layer.msg("请求出错！")
                }
            });


        }
        function submitReqRefused(data) {
            let $parent = data.parent();
            let uid = $parent.prev().children("input").val();
            $.ajax({
                url: "/add-request/refused",
                type: "POST",
                data: {
                    fromId: uid
                },
                success: function (data) {
                    if (data.code==200){
                        $parent.children().remove()
                        $parent.html("已拒绝");
                    }else{
                        layer.msg(data.message);
                    }
                },
                error: function () {
                    layer.msg("请求错误");
                }
            });


        }
        /*提交删除聊天记录*/
        function submitClearMessage() {
            $("#closeWarnCM").trigger('click');//关闭弹框
            clearMessage(toFriendId);//清除记录
            layer.msg("删除聊天记录成功",{icon:1})
        }
        /*提交删除好友请求*/
        function submitRemoveFriend() {
            $("#closeWarnRF").trigger('click');//关闭弹框
            removeFriend(toFriendId);
        }

        function clearMessage(uid) {
            let idx = idIdxMap[uid];
            if (idx!=null){
                //删除聊天记录
                localStorage.removeItem("chat_"+userId+"_"+uid);
                //删除最近聊天列表记录
                chatCache.remove(uid);
                //更新页面
                $("#chat-first").empty();
                $tab = $("#chat-tab-"+uid);
                if ($tab!=null){
                    $tab.remove();
                }
            }
        }

        function removeFriend(uid) {
            let idx = idIdxMap[uid];
            if (idx !=null){
                //发送请求删除关系
                $.ajax({
                    url: "/friend/remove/"+uid,
                    type: "POST",
                    data: {
                    },
                    success: function (data) {
                        if (data.code==200){
                            layer.msg("删除好友成功",{icon:1});
                        }else{
                            layer.msg(data.message,{icon:2});
                        }
                    },
                    error: function () {
                        layer.msg("客户端请求错误",{icon:2})
                    }
                });
                //清理聊天记录
                clearMessage(uid);
                //更新列表内容
                $("#friend-list > a[name='"+idx+"']").remove();
                $("#mainLiaotian").removeClass("show");
            }
        }


        /**
         * 收到一条消息
         * */
        function receiveOneMessage(message) {
            message.dateTime = new Date(message.dateTime).format("yyyy-MM-dd HH:mm:ss");
            let jsonMessage = JSON.stringify(message);
            //进行本地存储
            localStoreMessage(message.fromId,jsonMessage);
            //提示用户收到消息
            chatUpTab(message.fromId,message);
            //如果正是当前页在显示，直接展示
            if (message.fromId == toFriendId){
                displayMessage(message,0);
            }
        }
        /**
         * 收到多条离线消息
         * */
        function receiveAllOfflineMessage(messageList) {
            for (let i = 0; i < messageList.length; i++) {
                messageList[i].dateTime = new Date(messageList[i].dateTime).format("yyyy-MM-dd HH:mm:ss");
                //进行本地存储
                localStoreMessage(messageList[i].fromId,JSON.stringify(messageList[i]));
                //最近聊天记录
                chatUpTab(messageList[i].fromId,messageList[i]);
            }
        }

        /**
         * 收到好友请求消息
         **/
        function receiveFriendRequestMessage(message) {
            var context =
                "                            <li class=\"media\">\n" +
                "                                <img class=\"align-self-center rounded-circle\" src=\""+message.photo+"\" alt=\"Generic placeholder image\">\n" +
                "                                <div class=\"media-body\">\n" +
                "                                    <h5><span>"+message.realName+"</span></h5>\n" +
                "                                    <p>"+message.status+"</p>\n" +
                "                                    <input type=\"hidden\" name=\"uid\" value=\""+message.fromId+"\">\n" +
                "                                </div>\n" +
                "                                <div class=\"custom-control custom-checkbox\">\n" +
                "                                    <a href=\"javascript:;\" class=\"btn btn-success btn-xs\" onclick=\"submitReqAccept($(this))\" style=\"font-size: 12px; font-weight: 500;\" role=\"button\">\n" +
                "                                        <i class=\"feather icon-check\"></i> 同意\n" +
                "                                    </a>\n" +
                "                                    <a href=\"javascript:;\" class=\"btn btn-danger btn-xs\" onclick=\"submitReqAccept($(this))\"  style=\"font-size: 12px; font-weight: 500;\" role=\"button\">\n" +
                "                                        <i class=\"feather icon-x\"></i> 拒绝\n" +
                "                                    </a>\n" +
                "                                </div>\n" +
                "                            </li>";
            $("#friendRequestUl").append(context);
            //显示徽章
            $("#friendRequestBadge").show();
        }
        /**
         * 收到 好友请求同意信息
         * */
        function receiveNewFriendMessage(obj) {
            var len = friendList == null ? 0 :friendList.length;
            friendList.push(obj);
            idIdxMap[obj.id] = len;
            var hidden = obj.onLine ==1 ?'':' hidden';
            var context =
                "                                <a class=\"nav-link\"  name=\""+len+"\" data-toggle=\"pill\" href=\"#\" role=\"tab\" aria-selected=\"false\">\n" +
                "                                    <div class=\"media\">\n" +
                "                                       <div class=\"user-status"+hidden+"\"></div>\n"+
                "                                        <img class=\"align-self-center rounded-circle\" src=\""+obj.photo+"\" alt=\"User Image\">\n" +
                "                                        <div class=\"media-body\">\n" +
                "                                            <h5>"+obj.realName+"</h5>\n" +
                "                                            <p>"+obj.status+"</p>\n" +
                "                                        </div>\n" +
                "                                    </div>\n" +
                "                                </a>";
            if (hidden==''){
                $("#friend-list").prepend(context);
            }else{
                $("#friend-list").append(context);
            }

            var message ={};
            message["dateTime"] = getNowFormatDate();
            message["text"] = "我们已经是好友啦，一起来聊天吧！";
            message["toFriendId"] = userId;
            message["fromId"] = obj.id;

            receiveOneMessage(message);
        }

        /**
         * 收到上线、下线消息
         * on：0 下线/1 上线
         */
        function receiveOnlineChange(frdId,on) {
            let idx = idIdxMap[frdId];
            if (idx!=null){
                if (on == 0 && friendList[idx].onLine==1){
                    friendList[idx].onLine=0;
                    var $a = $("#friend-list > a[name ='"+idx+"']");
                    $a.eq(0).children("div").children(".user-status").addClass("hidden");
                    $a.appendTo("#friend-list");
                    var $tab = $("#chat-tab-"+frdId);
                    if ($tab!=null){
                        $tab.find(".user-status").addClass("hidden");
                    }
                }else if (on == 1 && friendList[idx].onLine==0){
                    friendList[idx].onLine=1;
                    var $a = $("#friend-list > a[name ='"+idx+"']");
                    $a.eq(0).children("div").children(".user-status").removeClass("hidden");
                    $a.prependTo("#friend-list");
                    var $tab = $("#chat-tab-"+frdId);
                    if ($tab!=null){
                        $tab.find(".user-status").removeClass("hidden");
                    }
                }
            }
        }

        /**
         * 将一段对话显示在聊天区域
         * @param message
         * @param sign
         */
        function displayMessage(message,sign) {
            var lr = "";
            if (sign==1){
                lr = "right";
            }else{
                lr = "left";
            }
            var context =
                "                           <div class=\"chat-message chat-message-"+lr+"\">\n" +
                "                                <div class=\"chat-message-text\">\n" +
                "                                    <span>"+message.text+"</span>\n" +
                "                                </div>\n" +
                "                                <div class=\"chat-message-meta\">\n" +
                "                                    <span>"+message.dateTime+"<i class=\"feather icon-check ml-2\"></i></span>\n" +
                "                                </div>\n" +
                "                            </div>"
            $("#chat-first").append(context);
        }
        function displayChatFirst(toID) {
            var val = localStorage.getItem("chat_"+userId+"_"+toID);
            if (val!=null){
                //获取聊天集合
                var jsonCts ="["+val+"]";
                //集合反序列化
                var messageList = JSON.parse(jsonCts);
                //显示区域
                for (let i=0;i<messageList.length;i++){
                    displayMessage(messageList[i],messageList[i].fromId==userId?1:0);
                }
            }
        }
        function localStoreMessage(toID,jsonMessage) {
            var key = "chat_"+userId+"_"+toID;
            var val = localStorage.getItem(key);
            if(val==null){
                localStorage.setItem(key,jsonMessage);
            }else{
                localStorage.setItem(key,val+","+jsonMessage);
            }
        }
        //更新用户详情
        function updateUserBody(id){
            let idx = idIdxMap[id];
            if (idx == null){
                layer.msg("请求错误")
                return;
            }
            var usr = friendList[idx];
            if (usr == null){
                layer.msg("请求错误")
                return;
            }
            var $userbar = $(".userbar");
            $userbar.children("img").attr("src",usr.photo);
            $userbar.children("h5").html(usr.realName);
            let $userDetail = $(".user-detail");
            let $spanList = $userDetail.find("span");
            $spanList.eq(0).html(usr.username);
            $spanList.eq(1).html(usr.sex ===1 ?'男' :'女');
            $spanList.eq(2).html(usr.status);
            $spanList.eq(3).html(usr.email);
            $spanList.eq(4).html(usr.location);
            $(".chat-user-info").addClass("show");
            $(".chat-bottom").addClass("small");
        }

        // 页面卸载
        // 页面可见时，用户关闭 Tab 页或浏览器窗口。
        // 页面可见时，用户在当前窗口前往另一个页面。
        // 页面不可见时，用户或系统关闭浏览器窗口。
        document.addEventListener('visibilitychange', function (){
            //把最近聊天列表存储到localStore
            localStorage.setItem("chatCache_user_"+userId,JSON.stringify(chatCache));
        })

        //监听窗口关闭事件
        window.onbeforeunload = function () {
            // 主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
            webSocket.close();

        }

        /* -- Show User Info -- */
        $("#view-user-info").on("click", function(e) {
            e.preventDefault();
            // 请求获取这个信息
            updateUserBody(toFriendId);

        });
        /* -- Close User Info -- */
        $("#close-user-info").on("click", function(e) {
            e.preventDefault();
            $(".chat-user-info").removeClass("show");
            $(".chat-bottom").removeClass("small");
        });

        /*聊天表情框Emoji*/
        $(function () {
            var emojiStart = 128512;
            var emojiEnd = 128680;
            for (var i = emojiStart; i <= emojiEnd; i++) {
                $(".emoji-list").append("<li>&#" + i + ";</li>")
            }

            $(".emoji-list li").on("click", function (data) {
                let content = $("#input-message").val();
                $("#input-message").val(content + data.target.innerHTML);
            })
        })

        let  randomChatMatchIdx = null;
        function randomChatMatch() {
            //1.消息提示框
            randomChatMatchIdx = layer.open({
                content: '请耐心等待（大约时间20秒）,若无响应是当前匹配的人过少'
                ,icon: 16
                ,title:'随机聊天匹配'
                ,btn: ['最小化']
                ,offset: '200px'
                ,closeBtn: 0
                ,resize: false
                ,yes: function(index, layero){
                    //关闭弹框
                    layer.close(index);
                }
            });
            //2.发送请求
            $.ajax({
                url: "/randomChat/match",
                type: "POST",
                data: {
                },
                success: function (data) {
                    if (200 !== data.code){
                        layer.close(randomChatMatchIdx);
                        if (400210 === data.code){
                            //处理失败：关闭弹框并提示
                            layer.msg(data.obj,{icon:2});
                        }else{
                            layer.msg("请求错误",{icon:2});
                        }
                    }
                },
                error: function () {
                    layer.close(randomChatMatchIdx);
                    layer.msg("请求错误",{icon:2});
                }
            });
        }
        function randomWindow(uid) {
            layer.open({
                content: '匹配聊天成功，将会新建窗口进入（请确认...）'
                ,icon: 6
                ,title:'随机聊天匹配'
                ,btn: ['确认']
                ,offset: '200px'
                ,closeBtn: 0
                ,resize: false
                ,yes: function(index, layero){
                    //关闭弹框
                    layer.close(index);
                    //URL设置
                    var url = "http://"+window.location.host+"/randomChat/random-window/"+uid;
                    let $a = $("#random-link");
                    $a.attr('href',url);
                    //模拟点击跳转
                    document.getElementById("random-link").click();
                }
            });
        }


    </script>


</body>
</html>